import React                    from 'react';
import {Route}                  from 'react-router-dom';

import history                  from '../../utils/history';
import 'BottomNav.scss';

export const BottomNav = ({children}) => <div className="bottom-nav">{children}</div>;

export const Button = ({label, to, icon}) => (
    <Route
        path={to}
        children={({match}) => (
            <div
                onClick={(e) => {e.stopPropagation(); !match && history.push(to)}}
                className={`bn-item flex-avg${match ? ' active' : ''}`}
            >
                {icon}
                {label}
            </div>
        )}
    />
);
